<template>
  <div>
    <draggable
      class="drag-content"
      :list="widgetList"
      ghost-class="ghost"
      itemKey="id"
      :force-fallback="true"
      group="list"
      :fallback-class="true"
      :fallback-on-body="true"
      @add="OnAdd"
    >
      <template #item="{ element }">
        <div class="item move">
          <div
            class="Ecahrts-box"
            v-if="['line', 'bar', 'pie', 'echarts'].includes(element.type)"
          >
            <Echarts :option="element.option" />
          </div>
          <component :is="UpdateCmp(element)"></component>
        </div>
      </template>
    </draggable>
  </div>
</template>
<script setup>
import draggable from "vuedraggable"
import { ref } from "vue"
import Echarts from "./Echarts.vue"
import anniu from "./anniu.vue"
import wenben from "./wenben.vue"

const widgetList = ref([])
const UpdateCmp = (e) => {
  console.log(e.type)
  // console.log(e.type)
  if (e.type == "button") {
    return anniu
  } else if (e.type == "wenben") {
    return wenben
  }
}
const OnAdd = (e) => {
  console.log(e, "拉进来了")
}
watch(
  () => widgetList.value,
  (val) => {
    console.log(val, "监听到数据变化")
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style scoped lang="less">
.drag-content {
  width: 100%;
  height: 500px;
  .Ecahrts-box {
    width: 300px;
    height: 200px;
  }
}
</style>
